<template>
	<view class="consent">
		<nav-bars backState="1000" :bgColor="navBackground" fontColor="#000" title="账单详情"></nav-bars>
		<view class="wrapper">
			<view class="top-column">
				<view class="headImg margin-center">
					<image :src="headimg" mode=""></image>
				</view>
				<view class="storeName margin-center text-overflow">
					{{nickname}}
				</view>
				<view class="money margin-center">
					<text>-</text>
					<text>{{pay_amount}}</text>
				</view>
				<view class="payStatus margin-center">
					{{order_status==1?'支付成功':'支付失败'}}
				</view>
			</view>
			<view class="itemBlock">
				<view class="sidebarBox flex items-center">
					<view class="sidebarLeft">支付方式</view>
					<view class="sidebarRight">收款码收款</view>
				</view>
				<view class="sidebarBox flex items-center">
					<view class="sidebarLeft">订单编号</view>
					<view class="sidebarRight">{{order_id}}</view>
				</view>
				<view class="sidebarBox flex items-center">
					<view class="sidebarLeft">收款商家</view>
					<view class="sidebarRight">{{store_name}}</view>
				</view>
				<view class="sidebarBox flex items-center">
					<view class="sidebarLeft">订单备注</view>
					<view class="sidebarRight">{{memo==''?'无':memo}}</view>
				</view>
				<view class="sidebarBox flex items-center">
					<view class="sidebarLeft">创建时间</view>
					<view class="sidebarRight">{{formatDate(pay_at)}}</view>
				</view>
			</view>
			<view class="buyersBox flex items-center"  @click="toTelPhone">
				<view class="buyers">联系卖家
				</view>
				<image class="moreIcon" :src="`${baseImg}/static/adminShop/mores.png`"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				baseImg: this.$static,
				navBackground: '',
				mobile: '', //用户手机号
				headimg: '',
				nickname: '',
				pay_amount: '',
				order_status: '',
				order_id: '',
				pay_at: '',
				memo:'',
				store_name:'',
			}
		},

		onLoad(options) {
			let _this = this;
			let data = JSON.parse(decodeURIComponent(options.params))
			_this.mobile = data.store_mobile;
			_this.headimg = data.headimg;
			_this.pay_amount = data.pay_amount;
			_this.order_status = data.order_status;
			_this.order_id = data.order_id;
			_this.pay_at = data.pay_at;
			_this.nickname = data.nickname;
            _this.memo=data.memo;
			_this.store_name=data.store_name;
		},
		methods: {
			// 联系买家
			toTelPhone() {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: this.mobile,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			
			/**
			 * 时间戳格式化秒
			 * @param {Object} value
			 */
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				//return m + "-" + d + " " + h + ":" + minute + ":" + second;
				return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.consent {
		width: 100%;

		.wrapper {
			width: 100%;

			.top-column {
				margin: 58rpx auto;

				.headImg {
					width: 100rpx;
					height: 100rpx;
					display: block;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.storeName {
					width: 152rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					font-size: 26rpx;
					color: #464646;
				}

				.money {
					width: 208px;
					height: 78rpx;
					text-align: center;
					font-size: 64rpx;
					font-weight: bold;
					line-height: 78rpx;
					color: #252525;
				}

				.payStatus {
					width: 104rpx;
					height: 38rpx;
					text-align: center;
					font-size: 26rpx;
					font-weight: 500;
					line-height: 38px;
					color: #464646;
				}
			}

			.itemBlock {
				width: 94%;
				height: auto;
				margin: auto;

				.sidebarBox {
					width: 100%;
					height: 90rpx;
					justify-content: space-between;

					.sidebarLeft {
						width: 104rpx;
						height: 38rpx;
						font-size: 26rpx;
						line-height: 38rpx;
						color: #A6A6A6;
					}

					.sidebarRight {
						width: 360rpx;
						height: 38rpx;
						font-size: 26rpx;
						font-weight: 500;
						text-align: right;
						line-height: 38rpx;
						color: #464646;
					}
				}
			}

			.buyersBox {
				width: 94%;
				margin:68rpx auto;
				align-items: center;
				justify-content: space-between;

				.buyers {
					width: 104rpx;
					height: 38rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 38rpx;
					color: #464646;
				}

				.moreIcon {
					width: 12rpx;
					height: 18rpx;
				}
			}
		}

		.flex {
			display: flex;
		}

		.margin-center {
			margin: auto;
		}

		.items-center {
			align-items: center;
		}

		.text-overflow {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>
